import React from 'react';
import {
    Dialog,
    DialogTitle,
    DialogContent,
    DialogActions,
    Button,
    Typography,
    Divider,
    Box,
    Paper
} from '@mui/material';
import { Internship } from './types';
import PermissionGuard from '../../../components/PermissionGuard';

interface InternshipDetailDialogProps {
    open: boolean;
    onClose: () => void;
    internship: Internship | null;
    onEdit?: () => void;
}

const InternshipDetailDialog: React.FC<InternshipDetailDialogProps> = ({ open, onClose, internship, onEdit }) => {
    if (!internship) {
        return null;
    }

    // 格式化日期显示
    const formatDate = (dateStr: string) => {
        if (!dateStr) return '';

        // 如果是时间戳格式（秒级）
        if (!isNaN(Number(dateStr))) {
            const date = new Date(Number(dateStr) * 1000);
            return date.toLocaleDateString('zh-CN');
        }

        // 如果已经是日期字符串
        return dateStr;
    };

    return (
        <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
            <Paper elevation={0} sx={{ borderRadius: '8px' }}>
                <DialogTitle>
                    <Typography variant="h5" component="div" sx={{ fontWeight: 'bold', color: '#1976d2' }}>
                        实习详情
                    </Typography>
                </DialogTitle>
                <Divider />
                <DialogContent>
                    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, py: 1 }}>
                        <Box sx={{ display: 'flex', alignItems: 'center' }}>
                            <Typography variant="subtitle1" sx={{ fontWeight: 'bold', width: '120px', color: '#555' }}>
                                实习ID:
                            </Typography>
                            <Typography variant="body1" sx={{ color: '#333' }}>
                                {internship.id}
                            </Typography>
                        </Box>
                        <Box sx={{ display: 'flex', alignItems: 'center' }}>
                            <Typography variant="subtitle1" sx={{ fontWeight: 'bold', width: '120px', color: '#555' }}>
                                开始时间:
                            </Typography>
                            <Typography variant="body1" sx={{ color: '#333' }}>
                                {formatDate(internship.startDate)}
                            </Typography>
                        </Box>
                        <Box sx={{ display: 'flex', alignItems: 'center' }}>
                            <Typography variant="subtitle1" sx={{ fontWeight: 'bold', width: '120px', color: '#555' }}>
                                结束时间:
                            </Typography>
                            <Typography variant="body1" sx={{ color: '#333' }}>
                                {formatDate(internship.endDate)}
                            </Typography>
                        </Box>
                        <Box sx={{ display: 'flex', alignItems: 'center' }}>
                            <Typography variant="subtitle1" sx={{ fontWeight: 'bold', width: '120px', color: '#555' }}>
                                实习公司:
                            </Typography>
                            <Typography variant="body1" sx={{ color: '#333' }}>
                                {internship.company}
                            </Typography>
                        </Box>
                        <Box sx={{ display: 'flex', alignItems: 'center' }}>
                            <Typography variant="subtitle1" sx={{ fontWeight: 'bold', width: '120px', color: '#555' }}>
                                实习岗位:
                            </Typography>
                            <Typography variant="body1" sx={{ color: '#333' }}>
                                {internship.position}
                            </Typography>
                        </Box>
                        <Box sx={{ display: 'flex', alignItems: 'center' }}>
                            <Typography variant="subtitle1" sx={{ fontWeight: 'bold', width: '120px', color: '#555' }}>
                                实习地点:
                            </Typography>
                            <Typography variant="body1" sx={{ color: '#333' }}>
                                {internship.department || '未指定'}
                            </Typography>
                        </Box>
                    </Box>
                </DialogContent>
                <Divider />
                <DialogActions sx={{ p: 2 }}>
                    {onEdit && (
                        <PermissionGuard requireEditFeatures>
                            <Button onClick={onEdit} color="primary" variant="outlined">
                                编辑
                            </Button>
                        </PermissionGuard>
                    )}
                    <Button onClick={onClose} color="primary" variant="contained">
                        关闭
                    </Button>
                </DialogActions>
            </Paper>
        </Dialog>
    );
};

export default InternshipDetailDialog;
